<template>
    <div class="size"><button class="but" @click="handleDle">-</button><span class="size">  {{  count }} </span><button class="but" @click="handleAdd">+</button>  </div>
</template>
<script>
export default{
    //1.0 自己的数据可以直接改 
  /*   data(){
        return {
            count:100
        }
    } */
   //2. prop 传过来的数据不能直接修改 
   props: {
    count:Number,
   },
   methods:{
    handleAdd(){
        //通知父组件
        this.$emit('changeCount',this.count + 1)
    },
    handleDle(){
        this.$emit('changeCount',this.count - 1)
    }
   }
}

</script>
<style scoped>
.size{
    font-size:40px;
    text-align: center;

}
.but{
    border: 2px solid rgb(132, 126, 126);
    text-align: center;
    height: 80px;
    width: 80px;
    font-size: 50px;
}
</style>